<template>
    <el-dialog :title="title" :visible.sync="visible.isShow" size="tiny">
        <el-form ref="userManage" :model="formInline" label-width="100px" :rules="rules" >
            <el-row :gutter="41">
                <el-col :span="22"> 
                    <el-form-item label="用户名" prop="userName" v-if="state" >
                        <el-popover placement="top-start" trigger="focus" content="请输入中英文数字，20字符长度以内">
                            <el-input v-model="formInline.userName" placeholder="员工登录使用，不可重复；可支持中英文，数字" :maxlength="20" slot="reference" @blur="checkUserName"></el-input>
                        </el-popover>
                    </el-form-item>
                    <el-form-item label="用户名" v-else>{{formInline.userName}}</el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="41">
                <el-col :span="22"> 
                    <el-form-item label="真实姓名" prop="realName" >
                        <el-input v-model="formInline.realName" placeholder="请输入姓名" :maxlength="20"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="41">
                <el-col :span="22"> 
                    <el-form-item label="绑定手机号" prop="phone" >
                        <el-input v-model="formInline.phone" placeholder="请输入绑定手机号" :maxlength="11"></el-input> 
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="41">
                <el-col :span="22"> 
                    <el-form-item label="角色" prop="roleId">
                        <el-select v-autoResize v-model="formInline.roleId" placeholder="在权限管理模块增、删、改、查角色名称以及角色权限"  style="width: 100%;">
                            <el-option
                                v-for="item in roleList"
                                :key="item.pId"
                                :label="item.sName"
                                :value="item.pId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row type="flex" class="btn-group" justify="center" >
                <el-col :span="4">
                    <el-button @click="cancel">取 消</el-button>
                </el-col>
                    <el-col :span="4">
                    <el-button type="primary" @click="submit('userManage')">确 定</el-button>
                </el-col>
            </el-row> 
        </el-form>
    </el-dialog>  
</template>

<script>
import {insertEmployee, updateEmployee, checkCount} from 'api/userManager';
import validate from '@/utils/validate';

export default {
    name: 'addNewUser',
    props: {
        visible: {
            isShow: false
        },
        editItem: {
            default: {}
        },
        roleList: {
            default: []
        },
        state: { // 用来判断是否是新增
            default: true // 新增
        }
    },
    data() {
        return {
            title: '添加员工',
            formInline: {
                userName: '',
                realName: '',
                phone: '',
                roleId: ''
            }, 
            rules: {
                userName: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]+$/, message: '请输入中英文数字，20字符长度以内', trigger: 'blur' }
                ],
                realName: [
                    { required: true, message: '请输入真实姓名', trigger: 'blur' },
                    { pattern: /^[\u4e00-\u9fa5]+$/, message: '请输入中文，20字符长度以内', trigger: 'blur' }
                ],
                phone: [
                    ...validate.phoneRequired()
                ],
                roleId: [
                    { required: true, message: '请选择权限角色', trigger: 'change' }
                ] 
            },
            flag: true // 判断用户名是否重名,默认为重名
        }
    },
    created() {
        if (this.state) { // 新增
            console.log('1', this.editItem);
            this.formInline.userName = '';
            this.formInline.realName = '';
            this.formInline.phone = '';
            this.formInline.roleId = ''; 
            

        } else { // 修改
            // console.log('2', this.editItem);
            this.title ='修改员工';
            this.formInline.userName = this.editItem.account;
            this.formInline.realName = this.editItem.username;
            this.formInline.phone = this.editItem.phone;
            this.formInline.roleId = this.editItem.roleId;
        }
    },
    watch: {
        ['visible.isShow'](val) {
            if (!val) {
                this.resetForm('userManage');
            } 
        }
    },
    methods: {
        // 取消
        cancel() {
            this.visible.isShow = false;
        },

        // 判断用户是否重名
        checkUserName() {
            if (this.formInline.userName) {
                console.log(3233333333333);
                checkCount(this.formInline.userName).then(res => {
                    this.flag = false;
                }).catch(err => {
                    this.flag = true;
                })
            }
        },

        
        // 提交
        submit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (!this.state) { // 修改
                        updateEmployee(this.formInline.realName, this.formInline.phone, this.formInline.roleId, this.editItem.employeeId).then(res => {
                            this.$message({
                                type: 'success',
                                message: res.data.errorMsg
                            })
                            this.visible.isShow = false;
                            this.$emit('update-list');
                        })
                        
                    } else { // 新增
                        if (this.flag) {
                            this.$message({
                                type: 'error',
                                message: '用户名不可重名！'
                            })
                            return ;
                        }
                        insertEmployee(this.formInline.userName, this.formInline.realName, this.formInline.phone, this.formInline.roleId).then(res => {
                            this.$message({
                                type: 'success',
                                message: res.data.errorMsg
                            })
                            this.visible.isShow = false;
                            this.$emit('clear-search')
                            this.$emit('update-list');
                        })
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        // 表单重置
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }

    }
}

</script>

<style lang="scss" scoped>
.btn-group{
    padding-top:40px;
}
</style>